{% load static %}
<!DOCTYPE html>
<html style="overflow-x:auto;overflow-y:auto;">
<head>
	<title>Role Manage</title>
	
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="http://www.jeeplus.org/"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=9,IE=10" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<script>var d = "";</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
{% include 'base.html' %}
<script type="text/javascript">

    $(document).ready(function(){
        $('input.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });


</script>
	
	
	<meta name="decorator" content="ani"/>
	
<script src="{% static '/ani/static/plugin/bootstrapTable/bootstrap-table-zh-CN.js' %}"></script> 
<script src="{% static '/ani/static/plugin/bootstrapTable/bootstrap-table-contextmenu.js' %}"></script> 
<script src="{% static '/ani/static/plugin/bootstrapTable/tableExport.js' %}"></script> 
<script src="{% static '/ani/static/plugin/bootstrapTable/bootstrap-table-export.js' %}"></script> 

	
<script>
		$(document).ready(function() {
			$('#table').bootstrapTable({
					  //请求方法
						method: 'post',
						//类型json
						dataType: "json",
						contentType: "application/x-www-form-urlencoded",
		                 //是否显示行间隔色
		                striped: true,
		                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）     
		                cache: false,
				        showSearch: true,
						//显示刷新按钮
						showRefresh: true,
						//显示切换手机试图按钮
						showToggle: true,
						//显示 内容列下拉框
						showColumns: true,
						//显示切换分页按钮
		                //是否显示分页（*）  
		                pagination: false,   
		                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据  
		                url: "/system/role/list/",
		                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
		                //queryParamsType:'',   
		                ////查询参数,每次调用是会带上这个参数，可自定义                         
		                queryParams : function(params) {
		                	var searchParam = $("#searchForm").serializeJSON();
		                	searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
		                	searchParam.pageSize = params.limit === undefined? -1 : params.limit;
		                	searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
		                    return searchParam;
		                },
						onShowSearch: function () {
							$("#search-collapse").slideToggle();
						},
		                //分页方式：client客户端分页，server服务端分页（*）
		                sidePagination: "server",
		                contextMenuTrigger:"right",//pc端 按右键弹出菜单
		                contextMenuTriggerMobile:"press",//手机端 弹出菜单，click：单击， press：长按。
		                contextMenu: '#context-menu',
		                onContextMenuItem: function(row, $el){
		                    if($el.data("item") == "edit"){
		                    	edit(row.id);
		                    } else if($el.data("item") == "delete"){
		                        del(row.id);
		                       
		                    } 
		                },
		                columns: [{
					        checkbox: true
					       
					    }, {
					        field: 'name',
					        title: 'Role Name',
					        formatter:function(value, row, index){
					        	return '<a  href="#" onclick="jp.openViewDialog(\'View Role\', \'/system/role/view/?id='+row.id+'\',\'800px\', \'500px\')">'+value+'</a>'
					        }
					       
					    }, {
					        field: 'useable',
					        title: 'Useable',
					        formatter:function(value, row , index){
					        	return value=="0" ? '<font color="red">Disable</font>':'<font color="green">Enable</font>';
					        }
					    }, {
	                        field: 'operate',
	                        title: 'Operation',
	                        align: 'center',
	                        events: {
	            		        'click .view': function (e, value, row, index) {
	            		        	jp.openViewDialog('View Role', '/system/role/view/?id=' + row.id,'800px', '500px');
	            		        },
	            		        'click .edit': function (e, value, row, index) {
	            		        	jp.openSaveDialog('Edit Role', '/system/role/edit/?id=' + row.id,'800px', '500px');
	            		        },
	            		        'click .del': function (e, value, row, index) {
	            		        	del(row.id);
	            		        },
	            		        'click .auth': function (e, value, row, index) {
	            		        	jp.openSaveDialog('权限设置', '/system/role/permission/view/?id=' + row.id,'350px', '700px');
	            		        },
	            		        'click .assign': function (e, value, row, index) {
	            		        	
	            					$("#left").attr("class", "col-sm-6");
	            					setTimeout(function(){
	            						$("#right").fadeIn(500);
	            					},500)
	            					$("#roleLabel").html(row.name);
	            					$("#roleId").val(row.id);
									$("#id").val(row.id);
	            					$('#userTable').bootstrapTable("refresh",{query:{id:row.id}})
	            		        }
	            		    },
	                        formatter:  function operateFormatter(value, row, index) {
	            		        return [
	            		        	
	        						'<a href="#" class="view" title="View" ><i class="fa fa-eye"></i> </a>',
	        						
	        						 
	        						
	        							'<a href="#" class="edit" title="Edit"><i class="fa fa-edit"></i> </a>',
	        						
	        						
	        						 
	        						    '<a href="#" class="del" title="Delete"><i class="fa fa-trash"></i> </a>',
	        						
	        						 
	        							'<a href="#" class="auth"  title="权限设置"><i class="fa fa-cog"></i> </a>', 
	        						
	        						 
	        							'<a href="#" class="assign"  title="分配用户"><i class="fa fa-users"></i> </a>'
	        						
	            		        ].join('');
	            		    }
	                    }]
					
					});
				
				  if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端，默认关闭tab
					  $('#table').bootstrapTable("toggleView");
					}
				  
				  $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
			                'check-all.bs.table uncheck-all.bs.table', function () {
			            $('#remove').prop('disabled', ! $('#table').bootstrapTable('getSelections').length);
			            $('#edit, #auth').prop('disabled', $('#table').bootstrapTable('getSelections').length!=1);
			        });
		
				  $("#search").click("click", function() {// 绑定查询按扭
					  $('#table').bootstrapTable('refresh');
					});
				  $("#reset").click("click", function() {// 绑定查询按扭
					  $("#searchForm  input").val("");
					  $("#searchForm  select").val("");
					  $('#table').bootstrapTable('refresh');
					});
				  
			});
		
		  function getIdSelections() {
		        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
		            return row.id
		        });
		    }
		  
		  function add(){
			  jp.openSaveDialog('Add Role', '/system/role/add/','800px', '500px')
		  }
		  
		  function edit(id){
			  if(!id){
					id = getIdSelections();
				}
			  jp.openSaveDialog('Edit Role', "/system/role/edit/?id=" + id,'800px', '500px')
			  
		  }
		  function del(ids){
				if(!ids){
					ids = getIdSelections();
				}
				jp.confirm('确认要删除选中角色吗？',  function(){
					jp.loading();
             	  	jp.get("/system/role/del/?ids=" + ids, function(data){
             	  		if(data.success){
             	  			$('#table').bootstrapTable('refresh');
            	  			jp.success(data.msg);
            	  		}else{
            	  			jp.error(data.msg);
            	  		}
             	  	})
				})
		  }

		  function refresh() {
              $('#table').bootstrapTable('refresh');
          }

          function auth(id) {
              if(!id){
                  id = getIdSelections();
              }
              jp.openSaveDialog('权限设置', '/system/role/permission/view/?id=' + id,'350px', '700px');
          }
	</script>
	
<script>
function	getCookie(name) {
	                var value = '; ' + document.cookie;
	                var parts = value.split('; ' + name + '=');
	                if (parts.length === 2) return parts.pop().split(';').shift()
	            }
$(document).ready(function() {
		$('#userTable').bootstrapTable({
			  //请求方法
				method: 'post',
				//类型json
				dataType: "json",
				contentType: "application/x-www-form-urlencoded",
                 //是否显示行间隔色
                striped: true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）     
                cache: false,    
                //是否显示分页（*）  
                pagination: true, 
                
                pageList: [100],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据  
                url: "/system/role/user/list/",
                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',   
                ////查询参数,每次调用是会带上这个参数，可自定义                         
                queryParams : function(params) {
                	var searchParam = $("#searchForm").serializeJSON();
                	searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
                	searchParam.pageSize = params.limit === undefined? -1 : params.limit;
                	searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
                    return searchParam;
                },
                //分页方式：client客户端分页，server服务端分页（*）
                sidePagination: "server",
                columns: [{
			        field: 'loginname',
			        title: 'LoginName'
			    }, {
			        field: 'realname',
			        title: 'RealName',
			        formatter:function(value, row, index){
			        	return '<a  href="#" onclick="jp.openViewDialog(\'查看用户\', \'/ani/a/sys/user/form?id='+row.id+'\',\'800px\', \'680px\')">'+value+'</a>'
			        }
			    },{
			        field: 'office_name',
			        title: 'OfficeName'
			       
			    },  {
			        field: 'phone',
			        title: 'Phone'
			    }, {
			        field: 'mobile',
			        title: 'Mobile'
			    }, {
                    field: 'operate',
                    title: 'Operation',
                    align: 'center',
                    events: {
        		        'click .del': function (e, value, row, index) {
        		        	
        		        	jp.confirm('Are you sure you want to remove the user from the role?',function(){
        		        		jp.loading();
        		        		$.get('/system/role/user/out/?userId='+row.id+'&roleId=' + $("#roleId").val(), function(data){
  	                    	  		if(data.success){
  	                    	  			$('#userTable').bootstrapTable("refresh",{query:{id:$("#roleId").val()}});
  	                    	  			jp.success(data.msg);
  	                    	  		}else{
  	                    	  			jp.error(data.msg);
  	                    	  		}
  	                    	  	})
        		        	});
        		        }
        		    },
                    formatter:  function operateFormatter(value, row, index) {
        		        return [
        		        	
    						'<a href="#" class="del" title="移除" >[移除] </a>'
    						
        		        ].join('');
        		    }
                }]
			
			});
		
		  if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端
			  $('#userTable').bootstrapTable("toggleView");
			}
		  
			$("#assignButton").click(function(){
				jp.openUserSelectDialog(true,function(ids){
					
					jp.loading();
					var token = $('input[name=csrfmiddlewaretoken]').val();
					
				    $.post("/system/user/select/",{id:$("#roleId").val(),ids:ids,csrfmiddlewaretoken:token},function(data){
				    	//alert(data.success);
						if(data.success){
	        	  			$('#userTable').bootstrapTable("refresh",{query:{id:$("#roleId").val()}});
	        	  			jp.success(data.msg);
	        	  		}else{
	        	  			jp.error(data.msg);
	        	  		}
				    })
				})
			});
		  
		  });


</script>
	

</head>
<body id="" class=""  style="">
	
	<div class="wrapper wrapper-content">
	<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">Role List</h3>
	</div>
	<div class="panel-body">
	  <div class="row">
			<div id="left" class="col-sm-12">
			<!-- 搜索 -->
			<div id="search-collapse" class="collapse">
				<div class="accordion-inner">
					<form id="searchForm" class="form form-horizontal well clearfix" action="/ani/a/sys/role/" method="post">
						{% csrf_token %}
						<input type="text" id="id">
						<div class="col-xs-12 col-sm-6 col-md-4">
							<label class="label-item single-overflow pull-left" title="Role Name:">Role Name:</label>
							<input id="name" name="name" class=" form-control input-sm" type="text" value="" maxlength="64"/>
						</div>
						<div class="col-xs-12 col-sm-6 col-md-4">
							 <div style="margin-top:26px">
							  <a  id="search" class="btn btn-primary btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> Query</a>
							  <a  id="reset" class="btn btn-primary btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> Reset</a>
							</div>
						</div>
					</form>
				</div>
			</div>

			<!-- 工具栏 -->
		    <div id="toolbar">
		    	
		    		<a id="add" class="btn btn-primary"  onclick="add()"><i class="glyphicon glyphicon-plus"></i> Add</a>
				
				
					<button id="edit" class="btn btn-success" disabled onclick="edit()">
			            <i class="glyphicon glyphicon-edit"></i> Update
			        </button>
				
				
					<button id="remove" class="btn btn-danger" disabled onclick="del()">
			            <i class="glyphicon glyphicon-remove"></i> Delete
			        </button>
				
				
					<button id="auth" class="accordion-toggle btn btn-default" disabled onclick="auth()">
						<i class="fa fa-cog"></i>  Permission Set
					</button>
				
		    </div><!lo-- 工具栏结束 -->
	
		    <!-- 表格 -->
		    <table id="table"
		           data-toolbar="#toolbar"
		           data-id-field="id">
		    </table>
			
		    <!-- context menu -->
		    <ul id="context-menu" class="dropdown-menu">
		        <li data-item="edit"><a>编辑</a></li>
		        <li data-item="delete"><a>删除</a></li>
		        <li data-item="action1"><a>取消</a></li>
		    </ul> 
		    </div>
		    
		    <div  id="right" class="panel panel-default col-sm-6" style="display:none">
				<div class="panel-heading">
					<h3 class="panel-title"><label>User List,Owner Role: </label><font id="roleLabel"></font><input type="hidden" id="roleId"/></h3>
				</div>
				<div class="panel-body">
				 <div id="userToolbar">
					<button id="assignButton"  class="btn btn-outline btn-primary" title="Add User"><i class="fa fa-user-plus"></i> Add User</button>
				</div>
				 <!-- 表格 -->
			    <table id="userTable"
			           data-toolbar="#userToolbar"
			           data-id-field="id">
			    </table>
			   </div>
			</div>
			
		   </div>
		   </div>
		   </div>
	</div>

</body>
</html>